<template>
    <div class="container">
        <h3>设备管理</h3>
        <el-row style="margin-top:20px;">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>

                    <el-button slot="append" @click="handleSearch">搜索</el-button>
                </el-input>
            </el-col>

            <el-button type="primary" v-if="!added" @click="add" style="float:right; margin-right: 10px">新增设备</el-button>
        </el-row>

        <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
        >
            <el-table-column prop="type" sortable label="设备类型"></el-table-column>
            <el-table-column prop="manufacturer" sortable label="设备名称"></el-table-column>
            <el-table-column prop="model" sortable label="设备品牌"></el-table-column>
            <el-table-column prop="serial" sortable label="设备序列号"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                            type="text"
                            v-if="!edit"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            type="text"
                            v-if="!check"
                            @click="handleCheck(scope.$index, scope.row)">查看
                    </el-button>
                    <el-button
                            type="text"
                            v-if="!del"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"
                       :total="total" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

    </div>
</template>

<script>
    import {facility_findByList, facility_delete} from "@/request/api"
    export default {
        data() {
            return {
                total: 0,
                currentPage: 1,
                pagesize: 10,
                searchName: '',
                tableData: [],
                form: {},
                idx: -1,
                id: -1,
                boxCode: '',
                boxCode1: '',
                del: true,
                added: true,
                edit: true,
                check:true,
                action: '',
            };
        },
        created(){

        },
        mounted(){
            this.init();
            this.judgmentAuthority()
        },
        methods: {
            add(){
                this.$router.push({
                    path: '/facility/added'
                })
            },
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            init(){
                facility_findByList({page: this.currentPage}).then((res) => {
                    this.tableData = res.rows;
                })
            },
            handleCheck(index, row){

            },
            //搜索
            handleSearch(){

            },
            //跳转编辑页面
            handleEdit(index, row){
                this.$router.push({
                    path: '/facility/added',
                    query: {
                        id: row.id
                    }
                });
            },

            //删除
            handleDelete(index, row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    facility_delete(row.id).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.init();
                    })
                });
            },

            //判定操作按钮显示
            judgmentAuthority() {
                var type = JSON.parse(localStorage.getItem('userInfo')).appMenus;
                var URL = localStorage.getItem('requestUrl');
                type.map((item) => {
                    if (item.appName == '种植平台' && URL == item.appUrl) {
                        item.menus.map((item1) => {
                            if (item1.name == '设备管理' && item1.children != null) {
                                for (var i = 0; i < item1.children.length; i++) {
                                    if (item1.children[i].name == '新增') this.added = false;
                                    if (item1.children[i].name == '编辑') this.edit = false;
                                    if (item1.children[i].name == '查看') this.check = false;
                                    if (item1.children[i].name == '删除') this.del = false;
                                }
                            }
                        });
                    }
                    if (item.appName == '养殖追溯管理系统' && URL == item.appUrl) {
                        item.menus.map((item1) => {
                            if (item1.name == '设备管理' && item1.children != null) {
                                for (var i = 0; i < item1.children.length; i++) {
                                    if (item1.children[i].name == '新增') this.added = false;
                                    if (item1.children[i].name == '编辑') this.edit = false;
                                    if (item1.children[i].name == '查看') this.check = false;
                                    if (item1.children[i].name == '删除') this.del = false;
                                }
                            }
                        });
                    }
                });
            }

        }
    }
</script>

<style scoped lang="less">
    /deep/ .upload-daoru {
        background: #eee;
        .el-upload {
            border: none;
            width: auto;
            height: auto;
            border-radius: 0;
            float: right;
            margin-right: 10px
        }
    }

    .el-table {
        margin-top: 20px;
    }

    .el-pagination {
        text-align: center;
    }

    .el-pagination {
        text-align: center;
    }

    .el-col {
        margin-bottom: 0;
    }
</style>